import { computed } from "vue";
import { useDark } from "@pureadmin/utils";

export function usePublicHooks() {
  const { isDark } = useDark();

  const switchStyle = computed(() => {
    return {
      "--el-switch-on-color": "#6abe39",
      "--el-switch-off-color": isDark.value ? "#88909c" : "#dcdfe6"
    };
  });

  const tagStyle = computed(() => {
    return (status: number) => {
      return {
        "--el-tag-text-color": isDark.value ? "#fff" : "#606266",
        "--el-tag-bg-color": isDark.value ? "#262727" : "#f0f2f5",
        "--el-tag-border-color": isDark.value ? "#262727" : "#e4e7ed"
      };
    };
  });

  return {
    /** 当前网页是否为`dark`模式 */
    isDark,
    /** 表现为 `el-switch` 组件的`style`，一般用在 `status` 列中 */
    switchStyle,
    /** 表现为 `el-tag` 组件的`style`，一般用在 `status` 列中 */
    tagStyle
  };
}